<template>
  <div class="barBar-box">
    <ul class="barBar">
      <li
        v-for="(item, index) of data"
        :key="index"
      >
        <bar
          :settings="tempSettings"
          :title="item.title"
          :dataList="item.data"
          :labelNuit="tempSettings.labelNuit"
          :maxVal="tempSettings.maxVal"
          :yName="yName"
        >
        </bar>
      </li>
    </ul>
  </div>
</template>

<script>
import Bar from '@/common/echarts/Bar'
export default {
  name: 'BarBar',
  components: {
    Bar
  },
  props: {
    'data': {
      type: Array
    },
    'xData': {
      type: Array,
      default () {
        return ['最低出勤率', '最高出勤率', '月请假人数', '月缺勤人数']
      }
    },
    'maxVal': {
      type: Number,
      default: null
    },
    'labelNuit': {
      type: String,
      default: '{c}%'
    },
    'yName': {
      type: String,
      default: '人数（人）'
    }
  },
  data () {
    return {
      tempSettings: {
        xData: this.xData,
        data: [83, 98, 78, 58],
        linearGradient: ['#ffe98f', '#2dffff'],
        labelHide: true,
        maxVal: this.maxVal,
        xHide: true,
        yName: this.yName,
        labelNuit: this.labelNuit,
        color (params) {
          const colorList = ['#ffe98f', '#53e9ee', '#7193ff', '#315bff']
          return colorList[params.dataIndex]
        }
      }
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="stylus" scoped>
.barBar-box
  width: 100%
  .barBar
    width: 100%
    li
      height: 160px
      width: 33.3%
      float: left
      margin-top: 10px
</style>
